<template>
  <div class="home">
    <van-grid class="home-top" :border="false" :column-num="3">
      <van-grid-item
          v-for="(service,index) in topServiceList"
          :key="index"
          @click="serviceClick(service.code)"
      >
<!--        <van-icon size="40px" :name="service.icon"/>-->
        <van-image round width="40px" height="40px" :src="service.icon"/>
        <van-cell class="home-top-name">{{ service.name }}</van-cell>
      </van-grid-item>
    </van-grid>

    <div class="home-hot-title">热门专区</div>
    <van-grid class="home-hot" :border="false" :column-num="3">
      <van-grid-item
          v-for="(card,index) in hotList"
          :key="index"
          @click="cardClick(card.code)"
      >
<!--        <van-icon size="80px" :name="card.icon"/>-->
        <van-image width="80px" height="80px" :src="require('@/assets/health_card.png')"/>
        <van-cell class="home-hot-name">{{ card.name }}</van-cell>
      </van-grid-item>
    </van-grid>
  </div>
</template>

<script>
import {getHomeCardList} from "@/api/card";
import {getHomeServiceList} from "@/api/service";

export default {
  name: 'Home',
  data() {
    return {
      allServiceList: [],
      hotList: []
    }
  },
  created() {
    getHomeServiceList().then(res => {
      this.allServiceList = res.data
    })
    getHomeCardList().then(res => {
      this.hotList = res.data
    })
  },
  computed: {
    topServiceList() {
      const result = []
      if(this.allServiceList.length > 5) {
        result.push(...this.allServiceList.slice(0,5))
      } else {
        result.push(...this.allServiceList)
      }
      result.push({name:'更多服务',icon:'https://img01.yzcdn.cn/vant/apple-3.jpg',code:'more'})
      return result
    }
  },
  methods: {
    serviceClick(serviceCode){
      if(serviceCode === 'more') {
        this.$router.push('service')
      } else {
        this.$router.push('service/detail')
      }
    },
    cardClick(cardCode){
      console.info(cardCode)
    }
  }
}
</script>
<style lang="less">
  .home{
    margin-bottom: 20px;
    position: fixed;
    bottom: 60px;
    top: 0;
    background-color: #F8F8F8;
    height: 100%;
    overflow-y: auto;

    &-hot,&-top{
      .van-cell__value{
        text-align: center;
      }
      &-name,&-title{
        font-weight: bold;
      }
      &-title{
        margin-top: 10px;
        margin-left: 10px;
        margin-bottom: 5px;
      }
    }
    .van-grid{
      background-color: #FFFFFF;
    }
  }
</style>